<template>
  <div style="padding: 0 2px">
    <template v-if="auth === 'edit'">
      <a-input :size="size" @blur="blur" @focus="focus" v-model="innerValue"
               :placeholder="fieldConfig.placeholder"/>
    </template>
    <template v-else>
      <span style="white-space: pre-wrap" v-html="title || value"/>
    </template>
  </div>
</template>
<script>
import {createProps} from '@/utils';

export default {
  name: 'InputField',
  props: {
    fieldConfig: createProps(Object),
    size: createProps(String),
    value: {
      type: [Number, String],
      default: undefined
    },
    title: createProps(String),
    auth: createProps(String)
  },
  methods: {
    blur() {
      (this.tempValue !== this.value) && this.$emit('update');
    },
    focus() {
      this.tempValue = this.value
    }
  },
  computed: {
    innerValue: {
      get() {
        let res = this.value || this.title;
        return res && (res + '') || undefined;
      },
      set(v) {
        this.$emit('update:value', v);
        this.$emit('update:title', v);
      },
    }
  }
};
</script>